<template>
  <el-dialog
    :title="formData.id?'编辑分类':'添加分类'"
    :visible="showDialog"
    destroy-on-close
    @close="closeFn"
  >
    <el-form label-width="120px" :model="formData" :rules="rules">
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="formData.desc" />
      </el-form-item>
      <el-form-item label="封面">
        <!-- 上传图片 -->
        <LmageUpload ref="upload" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeFn">取 消</el-button>
      <el-button type="primary" @click="addClassifyList">确 定</el-button>
    </span>
  </el-dialog>

</template>

<script>
import { addClassifyList, editClassifyList } from '@/api/classify'
import LmageUpload from '@/components/ImageUpload'
export default {
  components: { LmageUpload },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imageUrl: '',
      formData: {
        title: '', // 标题
        desc: '', // 描述
        image: ''
      },
      rules: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '描述不能为空', trigger: 'blur' }

        ]
      }
    }
  },
  methods: {
    // 关闭弹窗
    closeFn() {
      this.$emit('update:showDialog', false)
      this.formData = {
        title: '', // 标题
        desc: '', // 描述
        image: ''
      }
    },
    // 新建分类
    async addClassifyList() {
      if (this.formData.id) {
        // 编辑
        this.formData.image = this.$refs.upload.fileList[0].url
        await editClassifyList(this.formData)
      } else {
        // 新增功能
        this.formData.image = this.$refs.upload.fileList[0].url
        await addClassifyList(this.formData)
        // console.log(66, res)
      }
      // 关闭弹窗
      this.closeFn()
      // 刷新页面
      this.$emit('undataList')
    }

  }
}
</script>

<style >
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
